<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>客户详情</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回</el-button>
            </div>
            <el-descriptions title="" direction="vertical" :column="10" border size="small">
                <el-descriptions-item label="门店名称">
                    {{ customerDetail.shopName }}
                </el-descriptions-item>
                <el-descriptions-item label="手机号">
                    {{ customerDetail.mobileNo }}
                </el-descriptions-item>
                <el-descriptions-item label="称呼">
                    {{ customerDetail.nickname }}
                </el-descriptions-item>
                <el-descriptions-item label="年龄">
                    {{ customerDetail.age }}
                </el-descriptions-item>
                <el-descriptions-item label="级别">
                    {{ customerDetail.level }}
                </el-descriptions-item>
                <el-descriptions-item label="职业">
                    {{ customerDetail.position }}
                </el-descriptions-item>
                <el-descriptions-item label="生日">
                    {{ customerDetail.birthday }}
                </el-descriptions-item>
                <el-descriptions-item label="口味">
                    {{ customerDetail.flavor }}
                </el-descriptions-item>
                <el-descriptions-item label="用餐次数">
                    {{ customerDetail.dinnerCount }}
                </el-descriptions-item>
                <el-descriptions-item label="备注">
                    {{ customerDetail.remark }}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-divider></el-divider>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>操作日志</span>
            </div>
            <customer-time-line :customer-id="customerDetail.id" size="small"></customer-time-line>
        </el-card>
        <el-divider></el-divider>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>预定历史</span>
            </div>
            <reserve :mobile-no="mobileNo" size="small"></reserve>
        </el-card>
    </div>
</template>

<script>
import {selectCustomerByMobileNo} from '@/api/api'
import Reserve from "@/component/Reserve";
import CustomerTimeLine from "@/component/CustomerTimeline";

export default {
    name: "customerDetail",
    components: {Reserve, CustomerTimeLine},
    data() {
        return {
            // 客户详情
            customerDetail: {},
            // 客户手机号
            mobileNo: '',
        }
    },
    methods: {
        getData() {
            selectCustomerByMobileNo({"mobileNo": this.mobileNo}).then(data => {
                this.customerDetail = data.body;
            })
        },
        goBack() {
            // 编程式导航
            this.$router.go(-1);
        },
    },
    created() {
        this.mobileNo = this.$route.query.mobileNo;
        this.getData();
    },
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
